<template>
  <view class="content">
    <image src="/static/pay-success.png" />
    <view class="success">充值成功</view>
    <view class="money">¥{{ data.total }}</view>
    <view class="more">充值¥{{ data.pay }} 赠送¥{{ data.give }}</view>
    <view class="btn" @click="goback">完成</view>
    <uni-popup ref="activePopup">
    <view class="active-popup-box">
      <view class="active-top">
        <image
          class="active-top-img"
          :src="topUrl"
          mode="scaleToFill"
        />
        <view class="title">{{ activeObj.name }}</view>
      </view>
    <image class="close" src="../../static/close.png" @click="activeClose" />
      <view class="active-popup" :style="{backgroundImage:`url('${activeBackGround}')`}">
      <!-- <view class="title">{{ activeObj.name }}</view> -->
      <view class="list">
        <view class="item box" @click="selectCoupon(item)" v-for="item in activeList" :style="filterBgImg(item)"> 
          <view class="item-l">
              <!-- <view class="time">{{ discountTypeObj[item.discountType] || "" }}</view> -->
              <view class="time" v-if="item.discountType == 11">{{ item.discountPrice / 100 }}元</view>
              <view class="time-m" v-if="item.discountType == 11">满{{ item.usePrice / 100 }}元</view>
              <view class="time" v-if="item.discountType == 12">{{ item?.discountTime }}折</view>
              <view class="time-m" v-if="item.discountType == 12">满{{ item?.discountLimitTime }}小时</view>
          </view>
          <view class="item-r">
            <view class="name">{{ item.name }}</view>
            <view class="time" v-if="item.validityType == 1">有效期至{{ filterTime(item.validEndTime) }}</view>
            <view class="time" v-if="item.validityType == 2">有效期至{{ filterTimeToDay(item.fixedEndTerm - item.fixedStartTerm + 1) }}</view>
          </view>

        </view>
      </view>
      <!-- <view class="btn" @click="activeClose">立即领取</view> -->
    </view>
    </view>
  
    
  </uni-popup>
  </view>
</template>
<script setup>
import { ref, reactive, watch, getCurrentInstance, onMounted } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { getListActivity } from "@/service/index";
const activePopup = ref()
const activeList = ref([])
const activeObj = ref({})
const activeBackGround = ref('')
const topUrl = ref()
const data = ref({
    total: 0,
    pay: 0,
    give:0
});
const filterTime = (date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}
const filterTimeToDay = (date) => {
  return dayjs().add(date, 'day').format('YYYY-MM-DD HH:mm:ss')
}
const activeClose = () => {
  activePopup.value.close();
  uni.showToast({
    title: '领取成功，请前往我的优惠券查看',
    icon: 'none'
  });
}
const filterBgImg = (item)=>{
 const obj = activeObj.value.itemList.filter((v)=>{
  return v.templateId === item.id
  })?.[0]
  if(obj){
    return {
      backgroundImage:`url('${obj.itemBackgroundUrl}')`,
      backgroundPosition: 'center center',
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'cover',
    }
  }
}
const getActive = (code = undefined) => {
   
  getListActivity({eventCode:code}).then(res => {
    if (res.length) {
      activeObj.value = res[0]
      activeList.value = res[0].templateList;
      activeBackGround.value = res[0].backgroundUrl;
      topUrl.value = res[0].topUrl;
      activePopup.value.open()
    }
  })
  
}
onLoad((options)=>{
    data.value.total = (options.payPrice / 100 + options.bonusPrice / 100).toFixed(2);
    data.value.pay = ((options.payPrice) / 100).toFixed(2);
    data.value.give = ((options.bonusPrice) / 100).toFixed(2);
    console.log(options,'222');
    getActive(5)
})
const goback = () => {
  uni.navigateBack({
    delta: 1,
  });
};
</script>
<style lang="less" scoped>
.content {
  display: flex;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 300rpx;
  image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 20rpx;
  }
  .success {
    font-weight: 400;
    font-size: 40rpx;
    color: #009a44;
    margin-bottom: 20rpx;
  }
  .money {
    font-weight: 600;
    font-size: 60rpx;
    color: #333333;
  }
  .more {
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
    margin-bottom: 40rpx;
  }
  .btn {
    width: 400rpx;
    height: 100rpx;
    line-height: 100rpx;
    background: linear-gradient(315deg, #00b952 0%, #00e565 100%);
    border-radius: 60rpx;
    text-align: center;
    font-weight: 600;
    font-size: 32rpx;
    color: #ffffff;
  }
}
.active-top-img{
  height: 320rpx;
  width: 100%;
  position: relative;
  top: 10rpx;
}
.active-popup-box{
  position: relative;
  .close{
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    bottom: -60rpx;
    width: 50rpx;
    height: 50rpx;
  }
}
.active-top{
  position: relative;
  .title {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: 800;
    font-size: 60rpx;
    line-height: 90rpx;
    text-shadow: 0px 4px 8px rgba(175,57,27,0.25);
    text-align: center;
    font-style: normal;
    background-image: linear-gradient(270deg, #F8E2A7 0%, #FFFBE6 100%);
    background-clip: text;
    color: transparent;
  }
}
.active-popup {
  // padding: 20rpx;
  // border-radius: 20rpx;
  // background: #EA492B;
  height: 550rpx;
  display: flex;
  flex-direction: column;
  background-position: center center;
  background-repeat: no-repeat;
  // background-attachment: fixed;
  background-size: cover;
  position: relative;
  border-radius: 0 0 40rpx 40rpx;


  .list {
    flex: 1;
    overflow-y: scroll;
    padding: 0 24rpx;

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24rpx;
      height: 160rpx;
      padding: 0 24rpx;

      .item-l {
        text-align: center;
        margin-right: 20rpx;

        .time {
          font-size: 36rpx;
          font-weight: 600;
          color: #FF5D15;
          margin-bottom: 10rpx;
        }

        .time-m {
          background: rgba(255, 93, 21, 0.1);
          padding: 8rpx 12rpx;
          border-radius: 8rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #FF5D15;
        }
      }

      .item-r {
        font-size: 30rpx;
        font-weight: 600;
        color: #333333;

        .name {
          margin-bottom: 20rpx;
        }

        .time {
          font-size: 26rpx;
          color: #999999;
          font-weight: 400;
        }
      }

      .icon {
        width: 36rpx;
        height: 36rpx;
      }
    }
  }

  .btn {
    height: 100rpx;
    background: linear-gradient(315deg, #00b952 0%, #00e565 100%);
    border-radius: 60rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 20rpx;
  }
}
</style>
